<script setup>
import Header from '../components/Header.vue';
import Category from '../components/Category.vue';
import Carousel from '../components/Carousel.vue';
import VideoCard from '../components/VideoCard.vue';
import { getVideoList } from '../api/video.js';
import { onMounted, onUnmounted, reactive,ref} from 'vue';
import { debounce } from 'lodash';
import ScrollHeader from '../components/ScrollHeader.vue';
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/useUserStore';
import { storeToRefs } from 'pinia';

const userStore = useUserStore();
const {isLogin}=storeToRefs(userStore)
//路由
const router=useRouter();
//视频列表
let videos = reactive([]);
//页数，视频数
let pageNum = ref(1);
let pageSize = ref(20);
//是否还有数据
let hasMore = ref(true);
const isScroll=ref(false)
//是否在头部显示更多分类
const isCategoryShow=ref(false)

//触底加载函数
function checkScrollBottom(){
  if(!hasMore.value){
    return
  }
  //当前页面已滚动距离
  const scrollTop=window.window.scrollY || window.pageYOffset
  //当前可视区域高度
  const viewHeight=document.documentElement.clientHeight
  //当前滚动条总高度
  const documentHeight=document.documentElement.scrollHeight
  //偏移量
  const offset=30
  if(scrollTop+viewHeight>=documentHeight-offset){ //判断是否触底scrollTop+viewHeight>=documentHeight-offset
    pageNum.value+=1
    console.log(pageNum.value)
    //加载数据
    getVideoData()
    console.log('触底加载数据')
  }
}
//防抖函数
const checkScrollBottomDebounce=debounce(checkScrollBottom,100)

//数据请求函数
async function getVideoData(){
  try{
    const params = {
      pageNum: pageNum.value,
      pageSize: pageSize.value
    }
    const res=await getVideoList(params)
    hasMore.value=res.hasMore
    console.log(res)
    //判断是否还有数据
    if(hasMore.value){
      //拼接数据,注意这里是响应式，用push
      videos.push(...res.videosList)
    }else{
      console.log('没有更多数据了')
    }
  }catch(err){
    console.log(err)
  }
}
//改变导航栏样式
function scrollHeaderStyle(){
  const container=document.getElementById("big-container")
  console.log(container.scrollTop)
  if(container.scrollTop===0){
    isScroll.value=false;
  }else if(container.scrollTop<=200){    
    isScroll.value=true;
    isCategoryShow.value=false;
    console.log(isScroll.value)
  }else{    
    isCategoryShow.value=true;
    isScroll.value=true;
  }
}

const goToDetail=(videoId)=>{
   router.push({
    name: 'videoDetail',
    params: { id: videoId}
  })
}




//挂载时加载初始数据
onMounted(()=>{
  getVideoData()
  //监听滚动条
  window.addEventListener('scroll',checkScrollBottomDebounce,true)
  window.addEventListener('scroll',scrollHeaderStyle,true)

})
//卸载监听
onUnmounted(()=>{
  window.removeEventListener('scroll',checkScrollBottomDebounce)
  // window.removeEventListener('scroll',scrollHeaderStyle)
})

</script>

<template>
  <div class="big-container" id="big-container">
  <!-- 头部导航栏 -->
   <div class="header-container">
    <div class="bilibili-background-container">
       <img src="/导航栏.png" alt="bilibili"  class="bilibili-background-image"/>
       <img src="/logo.png" alt="bilibili"  class="bilibili-logo"/>
    </div>
    <Header class="header-item" id="header"></Header>
    <ScrollHeader 
    v-show="isScroll" 
    :isCategoryShow="isCategoryShow"
    class="scroll-header-item">
  </ScrollHeader>
   </div>
   <!--中间分类栏  -->
   <div>
    <Category></Category>
  </div>
  <!-- 视频部分 -->
  <div class="main-container">
    <!-- 网格布局 -->
    <div class="content-container">
      <div class="carousel-grid-item">
        <Carousel></Carousel>
      </div>
      <div v-for="video in videos" :key="video.videoId" class="video-grid-item" @click="goToDetail(video.videoId)">
        <VideoCard  :video="video"/>
      </div>
    </div>
  </div>
   </div>
</template>

<style scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 100%;
}

.big-container{
  height: 100vh;
  overflow-y: scroll;
  max-width: 100vw;
  margin: 0 auto;

}
.header-container{
  width: 100vw;
  height: 20vh;
  max-width: 1900px;
  margin: 0 auto;
  min-height: 150px;
  position: relative;
} 
.bilibili-background-container{
  width: 100%;
  height: 100%;
  max-width: 1900px;
  margin: 0 auto;
  z-index: 300;
}
.bilibili-background-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 1900px;
  height: 60%;
  background: linear-gradient(to bottom, rgb(59, 57, 57,0.6), rgb(0,0,0,0));
  z-index: 1;
}
.bilibili-background-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* border:1px solid red; */
}
.bilibili-logo{
  display: block;
  object-fit: contain;
  height: 45%;
  position: absolute;
  top: 70px;
  left: 87px;
  /* border: 1px solid red; */
  z-index: 100;
}
.header-item{
  width: 100%;
  height: 20%;
  margin: 0 auto;
  max-width: 1900px;
  /* background-color: aliceblue; */
  position: fixed; 
  top: 0; 
  z-index: 100;
}
.scroll-header-item{
  width: 100vw;
  position: fixed;
  top:0;
  z-index: 100;
}
.scroll-category-item{
  width: 100vw;
  position: fixed;
  top:64px;
  z-index: 80;
}

.main-container{
  width:100vw;
  display: flex;
  justify-content: center;
}

.content-container{
  width: 90%;
  min-width: 1300px;
  max-width: 1400px;
  margin: 0 auto;
  /* margin-left: 90px; */
  display: grid;
  /* 使用 auto-fit 和 minmax 实现响应式列数 */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  /* 设置固定的行高 */
  grid-auto-rows: minmax(200px,230px);
  gap: 20px;
  padding: 20px 0;
  /* border: 1px solid red; */
}
.carousel-grid-item {
  grid-column: 1 / span 2; /* 占据前两列 */
  grid-row: 1 / span 2;   /* 占据前两行 */
  height: 100%;
  /* border: 1px solid blue; */
}
@media only screen and (max-width: 1300px) {
  .content-container{
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    grid-auto-rows: minmax(230px,250px);
    /* margin-left: 50px; */
  }
}

</style>
